<template>
  <div class="home" @click="gotoDetail">
        <header-bar ref="headerBar" :scrollY = "scrollY"></header-bar>
        <mescroll-vue ref="mescroll" @init="mescrollInit">
            <div class="scroll-content">
                <search class="search" :scrollY = "scrollY" :headerHeight = "headerHeight"></search>
                <swiper></swiper>
                <navigation-menu :navigation_list = "navigation_list"></navigation-menu>
                <div class="list-content">
                    <list-title></list-title>
                    <list></list>
                </div>
            </div>
        </mescroll-vue>
  </div>
</template>
<script>
import HeaderBar from './components/headerBar.vue'
import Search from './components/search.vue'
import Swiper from './components/swiper.vue'
import NavigationMenu from './components/navigationMenu.vue'
import List from './components/list.vue'
import ListTitle from './components/listTitle.vue'
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
  data () {
    return {
      navigation_list: [
        {
          text: '超时便利',
          icon: require('@assets/images/cs.png')
        },
        {
          text: '菜市场',
          icon: require('@assets/images/csc.png')
        },
        {
          text: '水果店',
          icon: require('@assets/images/xgd.png')
        },
        {
          text: '鲜花绿植',
          icon: require('@assets/images/xh.png')
        },
        {
          text: '医药健康',
          icon: require('@assets/images/yy.png')
        },
        {
          text: '家居时尚',
          icon: require('@assets/images/jj.png')
        },
        {
          text: '烘培蛋糕',
          icon: require('@assets/images/dg.png')
        },
        {
          text: '签到',
          icon: require('@assets/images/qd.png')
        },
        {
          text: '大牌免运',
          icon: require('@assets/images/dpmy.png')
        },
        {
          text: '红包套餐',
          icon: require('@assets/images/hb.png')
        }
      ],
      list: [],
      scrollY: 0,
      headerHeight: 0,
      bounce: true,
      mescroll: null
    }
  },
  components: {
    HeaderBar,
    Search,
    Swiper,
    NavigationMenu,
    List,
    ListTitle,
    MescrollVue
  },
  mounted () {
    this.headerHeight = this.$refs.headerBar.$el.clientHeight
  },
  beforeRouteEnter (to, from, next) {
    // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      // 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter()
    })
  },
  beforeRouteLeave (to, from, next) {
    // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
    // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave()
    next()
  },
  methods: {
    mescrollInit (mescroll) {
      this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    gotoDetail () {
      this.$router.push({
        path: '/home/detail',
        query: {
          type: 'push'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  background: #F1F1F1;
  display: flex;
  flex-direction: column;
  .list-content {
    background: #ffffff;
    overflow: hidden;
  }
}
</style>
